<div class="list-container">
  <div class="search-line">
    <div class="search-condition-item search-date">
      <span class="condition-name">充值时间:</span>
        <nz-datepicker
          [nzSize]="'large'"
          (ngModelChange)="_startDate=$event;_startValueChange()"
          [(ngModel)]="_startDate"
          [nzDisabledDate]="_disabledStartDate" nzShowTime
          [nzFormat]="'YYYY-MM-DD'"
          [nzPlaceHolder]="'起始时间'"></nz-datepicker>
        <nz-datepicker
          [nzSize]="'large'"
          (ngModelChange)="_endDate=$event;_endValueChange()"
          [(ngModel)]="_endDate"
          [nzDisabledDate]="_disabledEndDate" nzShowTime
          [nzFormat]="'YYYY-MM-DD'"
          [nzPlaceHolder]="'结束时间'"></nz-datepicker>
    </div>
    <div class="search-condition-item">
      <span class="condition-name">充值方式：</span>
        <nz-select style="width: 120px;" [nzSize]="'large'" [(ngModel)]="pay_type">
          <nz-option [nzLabel]="'全部'" [nzValue]="0"></nz-option>
          <nz-option [nzLabel]="'微信'" [nzValue]="1"></nz-option>
          <nz-option [nzLabel]="'支付宝'" [nzValue]="2"></nz-option>
        </nz-select>
    </div>
    <button nz-button [nzType]="'primary'" [nzSize]="'large'" (click)="page=1;getList()">
      <span>查 询</span>
    </button>
    <button nz-button [nzType]="'default'" [nzSize]="'large'" (click)="reset()">
      <span>重 置</span>
    </button>

  </div>
  <div class="operate-line">
    <nz-dropdown>
      <button nz-button nz-dropdown><span>订单导出</span> <i class="anticon anticon-down"></i></button>
      <ul nz-menu>
        <li nz-menu-item>
          <a href="javascript:;" (click)="exportChecked(1)">全部导出</a>
        </li>
        <li nz-menu-item>
          <a href="javascript:;" (click)="exportChecked(2)">勾选导出</a>
        </li>
      </ul>
    </nz-dropdown>
  </div>
  <div class="checked-line" *ngIf="!!checkedIds.length">
    <i class="anticon anticon-info-circle"></i> 已选择 <span>{{checkedIds.length}}</span> 项
    <a href="javascript:;" (click)="checkedIds=[];_allChecked=false;_indeterminate=false;getList()">清空</a>
  </div>
  <nz-table #nzTable
            [nzAjaxData]="listData"
            [(nzLoading)]="loading"
            [nzTotal] ="total"
            [(nzPageIndex)]="page"
            [(nzPageSize)]="pageSize"
            (nzPageIndexChange)="getList()">
    <thead nz-thead>
    <tr>
      <th nz-th nzCheckbox>
        <label nz-checkbox [(ngModel)]="_allChecked" [nzIndeterminate]="_indeterminate" (ngModelChange)="_checkAll($event)">
        </label>
      </th>
      <th nz-th><span>订单号</span></th>
      <th nz-th><span>商户手机</span></th>
      <th nz-th>
        <span>充值数量</span>
        <nz-table-sort (nzValueChange)="sortData('price', $event)"></nz-table-sort>
      </th>
      <th nz-th>
        <span>充值方式</span>
      </th>
      <th nz-th><span>付款账户</span></th>
      <th nz-th>
        <span>状态</span>
        <nz-dropdown [nzTrigger]="'click'">
          <i class="anticon anticon-filter" nz-dropdown></i>
          <ul nz-menu>
            <li nz-menu-item *ngFor="let filter of filterStatus">
              <label nz-checkbox [(ngModel)]="filter.checked">
                <span>{{filter.name}}</span>
              </label>
            </li>
          </ul>
          <div nz-table-filter>
            <span nz-table-filter-confirm (click)="getList()">确定</span>
            <span nz-table-filter-clear (click)="resetStatus()">重置</span>
          </div>
        </nz-dropdown>
      </th>
      <th nz-th>
        <span>充值时间</span>
        <nz-table-sort (nzValueChange)="sortData('pay_time', $event)"></nz-table-sort>
      </th>
    </tr>
    </thead>
    <tbody nz-tbody>
    <tr nz-tbody-tr *ngFor="let data of nzTable.data">
      <td nz-td nzCheckbox>
        <label nz-checkbox [(ngModel)]="data.checked" (ngModelChange)="_refreshStatus($event, data.order_no)">
        </label>
      </td>
      <td nz-td>{{data.order_no}}</td>
      <td nz-td>{{data.mobile}}</td>
      <td nz-td>{{data.price/100}}元 </td>
      <td nz-td>
        <span *ngIf="data.pay_type===1">微信</span>
        <span *ngIf="data.pay_type===2">支付宝</span>
        <span *ngIf="data.pay_type===3">线下付款</span>
      </td>
      <td nz-td>{{data.buyer_id}}</td>
      <td nz-td>
        <span *ngIf="data.status===2||data.status===3"><span class="circle"></span>充值成功</span>
        <span *ngIf="data.status===1||data.status===4"><span class="circle failure"></span>充值失败</span>
      </td>
      <td nz-td>{{data.pay_time||''}}</td>
    </tr>
    </tbody>
  </nz-table>
</div>
